<template>
  <div class="home">
    <div class="header">
      <el-button @click="openAddModel()">添加</el-button>
    </div>
    <div class="table-box">
      <UnTable :tableData="tableData" :tableOption="tableOption" @pageChange="pageChange">
        <template #action="{ scope }">
          <el-button size="small" type="primary" @click="editAddModel(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteNba(scope.row)">删除</el-button>
        </template>
      </UnTable>
    </div>
    <el-dialog v-model="dialogVisible" :title="type==='add'?'添加记录':'编辑记录'" width="40%">
      <div class="userForm">
        <myForm :formData="formData" :formConfig="formConfig" :formColumn="formColumn" :formRules="rules" ref="FF"></myForm>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit()">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { getData, addNba,upDataNba } from '@/api/nba'
import myForm from '@/components/UnForm/index.vue'
import column from './config'
import { useRouter, useRoute } from 'vue-router'
import UnPagination from '@/components/UnPagination/index.vue'
import UnTable from '@/components/UnTable/index.vue'
import { TableOption } from '@/class/table.js'
const router = useRouter()
function useTableHooks() {
  const tableData = ref([])
  const tableColumn = [
    { label: '年份', prop: 'year' },
    { label: '总冠军', prop: 'champion' },
    { label: '比分', prop: 'total_score' },
    { label: '季军', prop: 'number_two' },
    { label: 'FMVP', prop: 'FMVP' },
    { label: 'MVP', prop: 'MVP' },
    { label: '最佳新秀', prop: 'new_mvp' },
    { label: '状元', prop: 'pick_first' },
    { label: '得分王', prop: 'scorer_first' },
    { label: '得分', prop: 'scorer' },
    { label: '篮板王', prop: 'rebounds_first' },
    { label: '篮板', prop: 'rebounds' },
    { label: '助攻王', prop: 'assists_first' },
    { label: '助攻王', prop: 'assists' },
  ]
  const tableOption = ref(new TableOption({ tableColumn }))
  const pageChange = async (val) => {
    if (val.type === 'currentPage') {
      tableOption.value.pageNum = val.pageNum
    } else {
      tableOption.value.pageSize = val.pageSize
      tableOption.value.pageNum = val.pageNum
    }
    initData()
  }
  return { tableData, tableOption, pageChange }
}
const { tableData, tableOption, pageChange } = useTableHooks()

const initData = async () => {
  let param = { pageNo: tableOption.value.pageNum, pageSize: tableOption.value.pageSize }
  const res = await getData(param)
  if (res.code === 200) {
    tableData.value = res.data.list
    tableOption.value.total = res.data.total
  }
}
//添加
const type = ref('add')
const dialogVisible = ref(false)
const formData = ref({
  year: '',champion: '',total_score:'',number_two:'',FMVP:'',MVP:'',new_mvp:'',pick_first:'',scorer_first:'',scorer:'',rebounds_first:'',rebounds:'',assists_first:'',assists:''
})
const formConfig = reactive({ labelWidth: '120px', ref: 'dom' })
const formColumn = reactive(column.column)
const rules = computed(() => {
  const obj = reactive({})
  formColumn.forEach((item) => {
    if (item.rule) {
      const key = item.fild
      const rule = item.rule
      obj[key] = rule
    }
  })
  return obj
})
const openAddModel = () => {
  type.value = 'add'
  formData.value={}
  dialogVisible.value = true
  formColumn[0].disabled=false
}
const editAddModel = (row) => {
  type.value = 'edit'
  formData.value=row
  dialogVisible.value = true
  formColumn[0].disabled=true
}
const FF = ref(null)
const submit = async () => {
  const res = await FF.value.checkForm()
  if (res) {
    const obj={
      add:addNba,
      edit:upDataNba
    }
    const res = await obj[type.value](formData.value)
    if (res.code == 200) {
      dialogVisible.value = false
      initData()
    }
  }
}
initData()
</script>
<style scoped lang="scss">
.home {
  height: 100%;
  padding: 20px;
  .header {
    margin-bottom: 20px;
  }
  .table-box {
    height: calc(100% - 100px);
    width: 100%;
    padding: 0 20px;
    overflow: auto;
  }
  .userForm {
    padding-right: 35px;
  }
}
</style>
